<template>
	<div class="Movietime">

		<div  class="overflow">
			<div class="overflowtime">
				<div class="dediv5">
					<span   class="Movietimea">今天</span>
					<span >明天</span>
					<span >后天</span>
					
				</div>
			</div>

		</div>

		<p class="dep7">
			<span>
				<span class="despan1">优惠活动</span>办理会员卡充值享8折电影票价
			</span>
			<span class="despan2">100元开充></span>
		</p>
		<div class="dediv8" v-for="(i,index) in locationTime.movies" :key="i.id"  v-show="index < 8">
			<div class="dediv6">
				<p class="dep6">
					<span class="despan3 despan4" id="start">{{2*index+9}}:30</span>
					<span class="despan5" id="language">{{i.nm}}</span>
					
				</p>
				<p class="dep6 dep10">
					<span class="despan6" id="finish">2021上映</span>
					<span class="despan7">千库激光3号厅</span>
					<span class="dep4">会员卡特惠28元</span>
				</p>
			</div>
			<button type="button" class="btn" 			 @click="toBuyTicket(i.id, i.nm)">买票选座</button>
		</div>

	</div>
</template>

<script>
	export default {
		props: ['locationTime'],
	
		methods:{

 toBuyTicket(id, nm) {
      this.$router.push({
        path: "/buyticket",
        query: { id, nm },
      });
    },

		}
	}
</script>

<style>
	.Movietime {
		font-size: 13px;
	}

	.overflow {
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
	}

	.overflowtime {
		display: flex;
	}

	.dediv5 {
		padding: 10px;
	}

	.dediv5 span {
		margin-right: 10px;
	}

	.Movietimea {
		color: #F73171;
	}

	.dep7 {
		padding: 10px;
		margin-bottom: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 13px;
	}

	.dep7 .despan1 {
		padding: 3px;
		border-radius: 2px;
		background-color: #28a492;
		margin-right: 7px;
	}

	.dep7 .despan2 {
		color: #248073;
	}

	.dep10 {
		font-size: 10px;
	}

	.dediv6 {
		float: left;
	}

	.dediv8 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		margin-top: 8px;
		background-color: #ffffff;
	}

	.dediv9 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
	}

	.despan3 {
		font-size: 20px;
		
	}

	.despan4 {
		margin-right: 25px;
	}

	.despan5 {
		margin-right: 50px;

	}

	.despan6 {
		color: #B3B3B3;
		margin-right: 20px;
		
	
	}

	.despan7 {
		color: #B3B3B3;
		margin-right: 20px;
	}

	.dediv7 {
		padding: 15px;
	}

	.btn {
		padding: 5px;
		border: 0px;
		border-radius: 6px;
		color: white;
		background-color: #f8645a;
	}
</style>
